import React from "react";
import CreateContextSon from "./CreateContextSon.jsx";

import { Provider, Consumer } from "./Context.js";

class CreateContext extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {
        name: "lisi",
        age: 3,
        grow: this.grown,
      },
    };
  }

  grown = () => {
    this.setState({
      user: { ...this.state.user, age: this.state.user.age + 1 },
    });
  };

  render() {
    let user = this.state.user;

    console.log(user);
    return (
      <div>

        <Consumer>
          {(user) => {console.log(user);return(
            <div
              style={{
                border: "1px solid blue",
                padding: "8px"
              }}
            >
              <p>
               单独使用Consumer(没有在Provider元素下面)，可以获取默认值 。获取父组件的值:{user.name} | age:{user.age}
              </p>
            
            </div>
          )}}
        </Consumer>



        
        <Provider value={user}>
          <div style={{ padding: 8 }}>
            <h3>createContext</h3>
            Provider和Consumer配合使用:<br/>
            name:{user.name},age:{user.age}{" "}
            <button
              onClick={() => {
                this.grown();
              }}
            >
              Grow
            </button>
            <CreateContextSon></CreateContextSon>
          </div>
        </Provider>
      </div>
    );
  }
}

export default CreateContext;
